<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    .active {
      color: red;
      background-color: #878787;
      border: none;
      outline: none;
    }
  </style>
</head>

<body>
  <!--
			
			假设现在从后台接受了一段关于访客的信息数据(添加新的访客信息从info里面按照顺序拿取),请实现问题一.gif的效果.
			
		-->
  <button class="add">添加一条新的访客信息</button>
  <button class="del">删除选中</button>
  <button class="sort">年龄从小到大</button>
  <!-- <button class="allSelect">全选</button> -->
  <label>全选<input type="checkbox" class="allSelect"></label>
  <button class="reverse">反选</button>
  <button class="idBtn">序列号从小到大</button>
  <button class="add1">添加一条新的访客信息(年龄插入)</button>


  <table border="1" cellspacing="0" cellpadding="10">
    <tr>
      <th>序列号</th>
      <th>姓名</th>
      <th>年龄</th>
      <th>操作</th>
      <th>选择</th>
    </tr>

    <!-- <tr>
      <td>01</td>
      <td>LY</td>
      <td>32</td>
      <td><button class="del">删除</button></td>
      <td> <input type="chexkbox"> </td>
    </tr> -->
  </table>
  <script type="text/javascript">
    var info = [
      { name: "胡杭", age: 16 },
      { name: "胜明", age: 22 },
      { name: "军毅", age: 21 },
      { name: "晓华", age: 13 },
      { name: "盛聪", age: 23 },
      { name: "侦剑", age: 32 },
      { name: "红翔", age: 25 },
      { name: "超维", age: 18 },
      { name: "士琪", age: 22 },
      { name: "艳华", age: 20 }
    ];
    let add = document.querySelector(".add");
    let del = document.querySelector(".del");
    let sort = document.querySelector(".sort");
    let allSelect = document.querySelector(".allSelect");
    let reverse = document.querySelector(".reverse");
    let idBtn = document.querySelector(".idBtn");
    let add1 = document.querySelector(".add1");
    let tbody = document.querySelector("tbody");


    let index = 0;
    // let newtr = null;
    let newdelbtn = null;
    let inplist = null;
    let trlist = null;
    let allsel = false;
    let reverselist = null;
    let idlist = null;
    let newSelectCheckbox = null;

    let isAgeOrder = false;
    while (info) {
      if (index === 5) {
        break;
      }
      // addItem();
      let newTr = document.createElement("tr");
      newTr.innerHTML =
        `
					<td>${(index + 1).toString().padStart(2, 0)}</td>
					<td>${info[(index % info.length)].name}</td>
					<td>${info[(index % info.length)].age}</td>
					<td><button>删除</button></td>
					<td><input type="checkbox"></td>
				`;
      tbody.appendChild(newTr);
      index++;
    }

    add1.addEventListener("click", () => {
      let newtr = document.createElement("tr");



    })


    function addItem() {

      let newtr = document.createElement("tr");
      newdelbtn = document.createElement("button");
      newdelbtn.innerText = "删除"
      newdelbtn.addEventListener("click", function () {
        // tbody.removeChild(this.parentElement.parentElement);
        // tbody.removeChild(newtr) //通过父节点删除指定的子节点
        newtr.remove(); //删除自身
      })

      newSelectCheckbox = document.createElement("input");
      newSelectCheckbox.setAttribute("type", "checkbox");
      newSelectCheckbox.addEventListener("change", () => {
        allsel = [...tbody.querySelectorAll("input")].every((item) => {
          return item.checked
        })
        newSelectCheckbox.checked = allsel;
      })
      newtr.innerHTML = ` 
      <td>${(index + 1 + "").padStart(2, 0)}</td>
      <td>${info[(index % info.length)].name}</td>
      <td>${info[(index % info.length)].age}</td>
      <td></td>
      <td></td>`;

      newtr.querySelector("td:nth-child(4)").appendChild(newdelbtn)
      newtr.querySelector("td:last-child").appendChild(newSelectCheckbox)

      if (isAgeOrder) {
        //按照年龄
        // 1.获取现有tr行数
        // 2.push(newtr)=>转化
        // 3.sort(年龄)
        // 4.appendChild(item) 插入tbody
        trlist = [...document.querySelectorAll("tr:not(:first-child)")]
        trlist.push(newtr)
        trlist.sort((a, b) => {
          return a.children[2].innerText - a.children[b].innerText;
        })
        trlist.forEach((item) => {
          tbody.appendChild(item)
        })


      } else {
        tbody.appendChild(newtr)

      }
      index++;
      // (++index === info.length) && (index = 0)
    }

    add.addEventListener("click", addItem);
    // add.addEventListener("click", () => {
    //   let newtr = document.createElement("tr");
    //   newdelbtn = document.createElement("button");
    //   newdelbtn.innerText = "删除"
    //   newdelbtn.addEventListener("click", function () {
    //     // tbody.removeChild(this.parentElement.parentElement);
    //     // tbody.removeChild(newtr) //通过父节点删除指定的子节点
    //     newtr.remove(); //删除自身
    //   })
    //   newtr.innerHTML = ` 
    //   <td>${(index + 1 + "").padStart(2, 0)}</td>
    //   <td>${info[(index % info.length)].name}</td>
    //   <td>${info[(index % info.length)].age}</td>
    //   <td></td>
    //   <td> <input type="checkbox"> </td>`;

    //   newtr.querySelector("td:nth-child(4)").appendChild(newdelbtn)
    //   tbody.appendChild(newtr)
    //   index++;
    //   // (++index === info.length) && (index = 0)
    // })

    del.addEventListener("click", () => {
      inplist = document.querySelectorAll("input:checked")
      inplist.forEach((item) => {
        // (item.checked) && (item.parentElement.parentElement.remove())
        item.parentElement.parentElement.remove()
      })
    })

    sort.addEventListener("click", () => {
      trlist = document.querySelectorAll("tr:not(:first-child)");
      // console.log(trlist[0].children[2].innerText);
      // [...trlist] //从NodeList换成数组 集合也可
      // console.log([...trlist]);
      trlist = [...trlist].sort((a, b) => {
        return a.children[2].innerText - b.children[2].innerText
      })

      trlist.forEach((item) => {
        tbody.appendChild(item);
      })
      idBtn.classList.remove("active");
      sort.classList.add("active")

      isAgeOrder = true;
    })


    allSelect.addEventListener("change", () => {
      allsel = allSelect.checked;
      tbody.querySelectorAll("input[type='checkbox']").forEach((item) => {
        item.checked = allsel
      })




    })

    reverse.addEventListener("click", () => {
      reverselist = document.querySelectorAll("input");
      reverselist.forEach((item) => {
        item.checked == true ? item.checked = false : item.checked = true
      })
    })

    idBtn.addEventListener("click", () => {
      idlist = document.querySelectorAll("tr:not(:first-child)");
      idlist = [...idlist].sort((a, b) => {
        // return a.children[0].innerText - b.children[0].innerText
        return a.firstElementChild.innerText - b.firstElementChild.innerText;
      })
      idlist.forEach((item) => {
        tbody.appendChild(item);
      })

      sort.classList.remove("active");
      idBtn.classList.add("active")

      isAgeOrder = false
    })







// 1. 全选功能
// 2. 反选功能
// 3. 按照序列号排序
// 4. 按照不同的排序状态 新的数据插入请放到对应位置








  </script>
</body>

</html>